<template>
  <div class="flow-wrap">
    <el-form
      :inline="true"
      :model="ruleform"
      ref="form"
      :rules="rules"
      class="demo-form-inline ip-form"
    >
      <el-form-item label="协议" prop="ptl">
        <el-select v-model="ruleform.ptl" placeholder="请选择">
          <el-option label="RTSP" value="RTSP"></el-option>
          <el-option label="RTMP" value="RTMP"></el-option>
          <el-option label="HTTP-FLV" value="HTTP-FLV"></el-option>
          <el-option label="WS-FLV" value="WS-FLV"></el-option>
          <!-- <el-option label="HLS" value="HLS"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="码流" prop="sub">
        <el-select v-model="ruleform.sub" placeholder="请选择">
          <el-option label="主码流" value="0"></el-option>
          <el-option label="子码流" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通道号" prop="channel">
        <el-input
          v-model="ruleform.channel"
          style="width:130px"
          message
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item
        label="截止时间"
        prop="limited_deadtime"
        show-overflow-tooltip
      >
        <div class="block">
          <el-date-picker
            v-model="ruleform.limited_deadtime"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </div>
      </el-form-item>
      <br />
      <el-form-item label="使用次数" prop="limited_times" show-overflow-tooltip>
        <el-input
          v-model="ruleform.limited_times"
          message
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="票据密码" prop="ticket_pwd">
        <el-input
          v-model="ruleform.ticket_pwd"
          message
          placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="每天时段" prop="limited_everyday">
        <el-time-picker
          is-range
          v-model="ruleform.limited_everyday"
          format="HH:mm"
          value-format="HH:mm"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          :picker-options="{
            selectableRange: '00:00 - 23:59'
          }"
        ></el-time-picker>
      </el-form-item>
      <br />
      <el-form-item label="每周时段" prop="limited_weekdays">
        <el-checkbox-group v-model="ruleform.limited_weekdays">
          <el-checkbox label="1" value="1" name="type">周一</el-checkbox>
          <el-checkbox label="2" value="2" name="type">周二</el-checkbox>
          <el-checkbox label="3" value="3" name="type">周三</el-checkbox>
          <el-checkbox label="4" value="4" name="type">周四</el-checkbox>
          <el-checkbox label="5" value="5" name="type">周五</el-checkbox>
          <el-checkbox label="6" value="6" name="type">周六</el-checkbox>
          <el-checkbox label="7" value="7" name="type">周日</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('form')"
          >添加</el-button
        >
        <el-button type="warning" plain @click="onReset('form')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { formatSeconds, tempToTime } from "@/utils/Tool";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    var checkNumber = (rule, value, callback) => {
      if (value != "") {
        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false) {
          callback(new Error("请输入大于0的数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
      callback();
    };
    return {
      sn: "",
      ruleform: {
        ptl: "",
        sub: "",
        channel: 0,
        limited_deadtime: "",
        limited_times: "",
        ticket_pwd: "",
        limited_everyday: ["", ""],
        limited_weekdays: []
      },
      rules: {
        ptl: [{ required: true, message: "请输入协议", trigger: "blur" }],
        sub: [{ required: true, message: "请输入", trigger: "blur" }],
        channel: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ],
        limited_deadtime: [{ required: false, message: "", trigger: "blur" }],
        limited_times: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" }
        ],
        ticket_pwd: [
          { required: false, message: "请输入票据密码", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ],
        limited_everyday: [
          { required: false, message: "请输入", trigger: "blur" }
        ],
        limited_weekdays: [
          {
            type: "array",
            required: false,
            message: "请至少选择一个",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.sn = this.$route.query.sn;
  },
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;
      // console.log(that.ruleform.limited_deadtime);
      // console.log(that.ruleform.limited_everyday);
      // console.log(that.ruleform.limited_weekdays);
      var picker_timestamp = new Date(that.ruleform.limited_deadtime).getTime();
      //限制时间
      var limited_everyday = that.ruleform.limited_everyday;
      var limited_everyday = that.ruleform.limited_everyday;
      console.log(that.ruleform.limited_everyday);
      var limited_everyday_end =
        Array.isArray(limited_everyday) &&
        limited_everyday[0] != "" &&
        limited_everyday[1] != ""
          ? that.ruleform.limited_everyday[0] +
            "-" +
            that.ruleform.limited_everyday[1]
          : "";
      console.log(limited_everyday);
      console.log(limited_everyday_end);

      //每周几
      var limited_weekdays = that.ruleform.limited_weekdays;
      var limited_weekdays_sub = limited_weekdays.map(item => Number(item));

      that.$refs[formName].validate(valid => {
        if (valid) {
          postData("/adminweb/device/stream/live/url/ticket/lasted", {
            sn: that.sn,
            ptl: that.ruleform.ptl,
            sub: Number(that.ruleform.sub),
            channel: Number(that.ruleform.channel),
            limited_deadtime: !picker_timestamp ? 0 : picker_timestamp,
            limited_times: Number(that.ruleform.limited_times),
            ticket_pwd: that.ruleform.ticket_pwd,
            limited_everyday: limited_everyday_end ? limited_everyday_end : "",
            limited_weekdays: limited_weekdays_sub
          })
            .then(res => {
              if (res.code == 0) {
                that.$message.success("添加成功！");
                //更新tabel组件
                that.$store.commit(
                  "setSubmitData",
                  Math.floor(Math.random() * 10000000)
                );
                let datas = resetForm(that.ruleform, that.$refs[formName]);
                that.ruleform = datas;
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch(res => {
              that.$message.error(res);
            });
        } else {
          that.$message.error("添加失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      //this.$emit("reset", true);
      this.$refs[val].resetFields();
    }
  },
  watch: {}
};
</script>
<style scoped>
.flow-wrap {
  padding-top: 20px;
  padding-left: 30px;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.totalFlow-form {
  padding-left: 30px;
}
.item {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.totalFlow-wrap >>> .el-form--inline .el-form-item__content {
  display: block;
}
.totalFlow-wrap >>> .el-radio {
  margin-top: 0;
}
.show-sn {
  line-height: 50px;
  margin-bottom: 10px;
  /* font-weight: 600; */
}
</style>
